<div>
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>关联设备关系</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn" cdkFocusInitial>clear</mat-icon>
    <div mat-dialog-content>
        
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>起始组件设备</span>
            <select style="width:100%" matNativeControl [(ngModel)]="form.startId" >
                <option *ngFor="let device of deviceList" [value]="device.id">
                  {{device.name}}
                </option>
            </select>
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>结束组件设备</span>
            <select style="width:100%" matNativeControl [(ngModel)]="form.endId" >
                <option *ngFor="let device of deviceList" [value]="device.id">
                  {{device.name}}
                </option>
            </select>
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>关系类型</span>
            <select style="width:100%" matNativeControl [(ngModel)]="form.relationType" >
                <option value="压缩空气">压缩空气</option>
                <option value="冷水">冷水</option>
                <option value="热水">热水</option>
            </select>
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>关系描述</span>
            <input [(ngModel)]="form.relationDesc" type="text" style="width:300px">
        </div>
        
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button [disabled]="!isValid(data.name)" color="primary" [mat-dialog-close]="form" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>
